const path=require('path');//设置路径
//启用热更新的第2步
const webpack=require('webpack');
//在内存中，根据指定的模板页面，生成一份内存中的页面
const htmlWebpackPlugin= require('html-webpack-plugin');

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports={
    entry:'./src/index.js',  //设置入口  等同于 entry:path.join(__dirname,'./src/index.js')
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:'main.js'
    },
    devServer:{
        open:true,  //设置自动打开浏览器
        port:3000,  //设置启动时候的运行端口
        contentBase:'src',  //指定托管的根目录
        hot:true    //启用热更新的第1步
    },
    plugins:[
        new VueLoaderPlugin(),
        new webpack.HotModuleReplacementPlugin(), //创建一个热更新的模块对象，这是启用热更新的第3步
        new htmlWebpackPlugin({
            template:'./src/index.html',
            filename:'index.html',
            inject:true,    //inject有四个值： true body head false
                            //true 默认值，script标签位于html文件的 body 底部
                            //body script标签位于html文件的 body 底部
                            //head script标签位于html文件的 head中
                            // false 不插入生成的js文件，这个几乎不会用到的
        })
    ],
    module:{
        rules:[
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use:'file-loader' },
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use:'url-loader?limit=59460&name=[hash:8]-[name].[ext]'}, //处理图片路径的loader
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']} ,
            // {test:/\.vue$/,use:[{loader:"vue.loader"}]} //处理.vue文件的loader
            {test:/\.vue$/,use:'vue-loader'}      //Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的,

        ]
    },
    resolve:{
        alias:{  //修改vue被导入时候的路径
            // "vue$":"vue/dist/vue.js"
        }
    },
    mode:'development'//设置模式为开发者模式
};

//webpack-dev-server帮我们打包生成的js文件，并没有存放到物理磁盘中,而是直接托管到电脑的内存中，所以，
//         在我们项目的根目录中根本找不到这个打包好的bundle.js

// 注：npm install的时候尽量的不要用cnpm，会出现问题，在node_modules下面找不到相关模块。